<!-- 一键导入 -->
<template>
  <div class="importModal">
    <div class="download">附件： <div class="textBtn" @click="downLoad">点击下载模板</div></div>
    <div class="selFile">
      <Input class="input" :disabled="true" placeholder="请选择文件" :value="value"></Input>
      <div>  
        <!-- 隐藏的文件输入元素 -->  
        <input type="file" id="fileInput" @change="handleFileUpload" accept=".xlsx, .xls" style="display: none;">  
        <!-- 自定义的选择文件按钮 -->  
        <div class="file textBtn" @click="openFileChooser">选择文件</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      value: '',
      fileJson: []
    }
  },
  props: {
    formType: {
      type: Number,
      default: 2
    }
  },
  methods: {
    downLoad() {
      const formatFileUrl = {
        2: '/static/files/applyFormTree.xlsx',
        3: '/static/files/rateFormTree.xlsx'
      }
      const formatTitle = {
        2: '申报类表单导入模板.xlsx',
        3: '评分类表单导入模板.xlsx'
      }
      const fileUrl = formatFileUrl[this.formType]
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = fileUrl
      a.download = formatTitle[this.formType] // 设置下载时的文件名
      // 将a标签添加到文档中
      document.body.appendChild(a)
      // 触发点击事件以下载文件
      a.click()
      document.body.removeChild(a)
      this.$emit("Close")
    },
    openFileChooser() {
      // 通过ID找到隐藏的文件输入元素并触发点击事件  
      document.getElementById('fileInput').click() 
    },
    // 处理文件上传  
    handleFileUpload(event) {
      // 读取文件内容作为ArrayBuffer
      const files = event.target.files
      if (files.length === 0) return
      const file = files[0]
      this.value = file.name
      const reader = new FileReader()
      reader.onload = (e) => {
        const data = e.target.result
        const workbook = XLSX.read(data, { type: 'binary' })
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
        this.fileJson = json.slice(1)
      }
      reader.readAsArrayBuffer(file)
    }
  },
  created() {
    this.$emit("SetTitle", "一键导入")
    this.$emit("SetPageWidth", 500)
    this.$emit("SetPageMinHeight", 150)
    this.$emit("SetPageActions", [
      {
        text: '确定',
        theme: "primary",
        handle: () => {
          if (!this.fileJson.length) {
            this.$Message.error("请选择文件")
          } else {
            this.$emit("Close", this.fileJson)
          }
        }
      },
      {
        text: '取消',
        theme: "primary",
        handle: () => {
          this.$emit("Close")
        }
      },
    ]);
  }
}
</script>

<style lang="less" scoped>
.importModal {
  .download {
    font-size: 16px;
    display: flex;
    margin-bottom: 30px;
    margin-left: 30px;
    &:nth-child(1) {
      margin-left: 30px;
    }
  }
  .selFile {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-left: 80px;
    .input {
      flex: 2;
    }
    .file {
      flex: 1;
    }
  }
  .textBtn {
    font-size: 16px;
    color: var(--primary-color);
    &:hover {
      cursor: pointer;
    }
  }
}
</style>